import React, { Component, PropTypes } from 'react';

const styles = {
  wrapper: {
    width: '100%',
  },
  content: {
    width: '100%',
  },
  errorMessage: {
    color: 'red',
  },
  singleBloodGroup: {
    marginLeft: 10,
    marginRight: 10,
  },
};

const CONTACT_NUMBER_ERROR_MESSAGE = 'please provide a valid contact numeber in the form of ' +
  '+xx xxx xxx xxxx or 00xx xxx xxx xxxx';
const EMAIL_ERROR_MESSAGE = 'please provide a valid email address';

export default class FillForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: '',
      lastName: '',
      contactNumber: '',
      email: '',
      bloodGroup: '',
    };
  }

  exactlyMatch(string, regex) {
    if (!string) {
      return false;
    }
    const match = string.match(regex);
    return match && match[0].length === string.length;
  }

  validateNonEmpty(string) {
    return !!string;
  }

  trimAllSpaces(string) {
    return string.split(' ').join('');
  }

  validateContactNumberWithoutSpaces(string) {
    return string.match(/\+\d/);
  }

  validateContactNumber() {
    const string = this.trimAllSpaces(this.state.contactNumber);
    return !string ||
      this.exactlyMatch(string, /00\d{12}/) ||
      this.exactlyMatch(string, /\+\d{12}/);
  }

  hasExtractlyOne(string, substring) {
    return string.includes(substring) &&
      string.indexOf(substring) === string.lastIndexOf(substring);
  }

  includesOnly(string, dictionary) {
    for (const character of string) {
      if (!dictionary.includes(character)) {
        return false;
      }
    }
    return true;
  }

  validateEmail() {
    const string = this.state.email.trim();
    return !string || /.+@.+\..+/.test(string);
  }

  render() {
    return (
      <div>
        <div>
          <span>First Name: </span>
          <input onChange={(event) => this.setState({ firstName: event.target.value })} />
        </div>
        <div>
          <span>Last Name: </span>
          <input onChange={(event) => this.setState({ lastName: event.target.value })} />
        </div>
        <div>
          <span>Contact number: </span>
          <input onChange={(event) => this.setState({ contactNumber: event.target.value })} />
          <ErrorMessage
            validate={this.validateContactNumber.bind(this)}
            text={CONTACT_NUMBER_ERROR_MESSAGE}
          />
        </div>
        <div>
          <span>Email: </span>
          <input onChange={(event) => this.setState({ email: event.target.value })} />
          <ErrorMessage
            validate={this.validateEmail.bind(this)}
            text={EMAIL_ERROR_MESSAGE}
          />
        </div>
        <div>
          <span>Blood group: </span>
          <BloodGroup
            onChange={() => this.setState({ bloodGroup: 'A' })}
            group={this.state.bloodGroup}
            displayGroup="A"
          />
          <BloodGroup
            onChange={() => this.setState({ bloodGroup: 'B' })}
            group={this.state.bloodGroup}
            displayGroup="B"
          />
          <BloodGroup
            onChange={() => this.setState({ bloodGroup: 'AB' })}
            group={this.state.bloodGroup}
            displayGroup="AB"
          />
          <BloodGroup
            onChange={() => this.setState({ bloodGroup: 'O' })}
            group={this.state.bloodGroup}
            displayGroup="O"
          />
        </div>
      </div>
    );
  }
}

const BloodGroup = (props) => (
  <span>
    <input
      type="radio"
      checked={props.group === props.displayGroup}
      onChange={props.onChange}
    />
    <span style={styles.singleBloodGroup}>
      {props.displayGroup}
    </span>
  </span>
);

BloodGroup.propTypes = {
  displayGroup: PropTypes.string.isRequired,
  group: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

const ErrorMessage = (props) => {
  return props.validate() ? null : (
    <div style={styles.errorMessage}>
      {props.text}
    </div>
  );
};

ErrorMessage.propTypes = {
  validate: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired,
};
